<?php
require_once('classTin.php');
$t = new tin;
$lang = 'vi';
$top04 = $t->TinMoiNhat($lang);
?>
<script>
$(document).ready(function() {

	$("ul.gallery li").hover(function() { //On hover...

		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

		//Set a background image(thumbOver) on the <a> tag - Set position to bottom
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

		//Animate the image to 0 opacity (fade it out)
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		});
	} , function() { //on hover out...
		//Fade the image to full opacity 
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});

});
</script>
<style type="text/css">
<!--
#top04 {
	height: 215px;
	width: 700px;
}
#top04 #sub {
	float: left;
	height: 211px;
	width: 171px;
	overflow: hidden;
	padding: 2px;
}
#top04 #sub #img_top04 {
	padding: 1px;
	height: 169px;
	width: 169px;
}
#top04  #sub  #img_top04  img {
	height: 167px;
	width: 167px;
	padding: 1px;
	border: 1px dotted #55FFAA;
}
#top04 #sub #detail_top04 {
	height: 38px;
	width: 171px;
	margin-top: 2px;
	font-size: 14px;
	text-align: center;
}
#top04 #sub #detail_top04 a {
	text-decoration: none;
	color: #CA0000;
	font-weight: bold;
}
#top04 #sub #detail_top04 a:hover {
	text-decoration: underline;
	color: #00E138;
}
-->
ul.gallery {
	width: 167px; /*--Adjust width according to your scenario--*/
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.gallery li {
	float: left;
	text-align: center;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
	width: 167px; /*--Width of image--*/
	height: 167px;
	cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
	width: 165px;
	height: 165px;
	overflow: hidden;
	display: block;
}
ul.gallery li a.thumb:hover {
	background-color: #9DFFCE;
}
ul.gallery li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	background: #f0f0f0; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}
</style>
<div id="top04">
<!--bắt đầu loop-->
<?php while($row_top04=mysql_fetch_assoc($top04)) { ?>
  <div id="sub">
  	<div id="img_top04">
    <ul class="gallery">
        <li>
            <a href="index.php?p=details&idTin=<?=$row_top04['idTin']?>" class="thumb">
                <span>
               	<img src="<?=$row_top04['urlHinh']?>" alt="<?=$row_top04['TieuDe']?>" title="<?=$row_top04['TieuDe']?>">                </span>            </a>        </li>
	</ul>
    
    </div>
    <div id="detail_top04">
    	<a href="index.php?p=details&idTin=<?=$row_top04['idTin']?>"><?=$row_top04['TieuDe']?></a>
    </div><!--END DIV DETAIL TOP 04-->
  </div><!--END DIV SUB-->
<!--kết thúc loop-->
<?php } ?>
</div>